<template>
<div class="settings-container">
    <div class="settings-header">
        <van-nav-bar title="设置" left-arrow @click-left="$router.go(-1)" />
    </div>

    <div class="settings-content">
        <!-- 账号与安全 -->
        <div class="settings-section">
            <div class="section-title">账号与安全</div>
            <van-cell-group inset>
                <van-cell title="个人资料" is-link @click="goToPage('profile-edit')" />
                <van-cell title="账号安全" is-link @click="goToPage('account-security')" />
                <van-cell title="隐私设置" is-link @click="goToPage('privacy')" />
                <van-cell title="实名认证" is-link @click="goToPage('verification')">
                    <template #right-icon>
                        <van-tag type="success" v-if="isVerified">已认证</van-tag>
                        <van-tag plain type="danger" v-else>未认证</van-tag>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <!-- 消息通知 -->
        <div class="settings-section">
            <div class="section-title">消息通知</div>
            <van-cell-group inset>
                <van-cell title="新消息通知" is-link @click="goToPage('notification-settings')" />
                <van-cell title="声音与振动" center>
                    <template #right-icon>
                        <van-switch v-model="soundEnabled" size="24" />
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <!-- 通用设置 -->
        <div class="settings-section">
            <div class="section-title">通用设置</div>
            <van-cell-group inset>
                <van-cell title="深色模式" center>
                    <template #right-icon>
                        <van-switch v-model="darkMode" size="24" @change="toggleDarkMode" />
                    </template>
                </van-cell>
                <van-cell title="字体大小" is-link @click="showFontSizePopup = true">
                    <template #right-icon>
                        <span class="font-size-text">{{ fontSizeOptions[fontSizeIndex] }}</span>
                    </template>
                </van-cell>
                <van-cell title="清除缓存" is-link @click="clearCache">
                    <template #right-icon>
                        <span class="cache-size">{{ cacheSize }}</span>
                    </template>
                </van-cell>
                <van-cell title="检查更新" is-link @click="checkUpdate" />
            </van-cell-group>
        </div>

        <!-- 关于与帮助 -->
        <div class="settings-section">
            <div class="section-title">关于与帮助</div>
            <van-cell-group inset>
                <van-cell title="关于我们" is-link @click="goToPage('about')" />
                <van-cell title="用户协议" is-link @click="goToPage('user-agreement')" />
                <van-cell title="隐私政策" is-link @click="goToPage('privacy-policy')" />
                <van-cell title="帮助中心" is-link @click="goToPage('help-center')" />
                <van-cell title="意见反馈" is-link @click="goToPage('feedback')" />
            </van-cell-group>
        </div>

        <!-- 退出登录 -->
        <div class="logout-btn">
            <van-button round block type="danger" @click="showLogoutConfirm">退出登录</van-button>
        </div>

        <!-- 版本信息 -->
        <div class="version-info">
            <p>当前版本：v1.0.0</p>
        </div>
    </div>

    <!-- 字体大小选择弹窗 -->
    <van-popup v-model="showFontSizePopup" position="bottom" round>
        <div class="font-size-popup">
            <div class="popup-header">
                <div class="popup-title">选择字体大小</div>
                <van-icon name="cross" @click="showFontSizePopup = false" />
            </div>
            <div class="font-size-slider">
                <van-slider v-model="fontSizeIndex" :min="0" :max="4" :step="1" @change="changeFontSize">
                    <template #button>
                        <div class="custom-slider-button">{{ fontSizeOptions[fontSizeIndex] }}</div>
                    </template>
                </van-slider>
                <div class="font-size-labels">
                    <span>小</span>
                    <span>标准</span>
                    <span>大</span>
                </div>
            </div>
            <div class="font-size-preview">
                <p>字体大小预览</p>
                <p :style="{ fontSize: fontSizePreview + 'px' }">这是预览文本，您可以查看不同字体大小的效果。</p>
            </div>
            <div class="popup-buttons">
                <van-button round block type="primary" @click="saveFontSize">确定</van-button>
            </div>
        </div>
    </van-popup>
</div>
</template>

<script>
export default {
    name: 'SettingsPage',
    data() {
        return {
            isVerified: false,
            soundEnabled: true,
            darkMode: false,
            fontSizeIndex: 2,
            fontSizeOptions: ['极小', '小', '标准', '大', '极大'],
            fontSizePx: [12, 14, 16, 18, 20],
            showFontSizePopup: false,
            cacheSize: '23.5MB'
        }
    },
    computed: {
        fontSizePreview() {
            return this.fontSizePx[this.fontSizeIndex]
        }
    },
    methods: {
        goToPage(page) {
            // 根据不同的页面进行路由跳转
            switch (page) {
                case 'profile-edit':
                    this.$router.push('/profile-edit')
                    break
                case 'account-security':
                    this.$router.push('/account-security')
                    break
                case 'privacy':
                    this.$router.push('/privacy-settings')
                    break
                case 'verification':
                    this.$router.push('/verification')
                    break
                case 'notification-settings':
                    this.$router.push('/notification-settings')
                    break
                case 'about':
                    this.$router.push('/about')
                    break
                case 'user-agreement':
                    this.$router.push('/user-agreement')
                    break
                case 'privacy-policy':
                    this.$router.push('/privacy-policy')
                    break
                case 'help-center':
                    this.$router.push('/help-center')
                    break
                case 'feedback':
                    this.$router.push('/feedback')
                    break
                default:
                    this.$toast('页面开发中')
            }
        },

        toggleDarkMode(value) {
            // 切换深色模式
            if (value) {
                document.documentElement.classList.add('dark-mode')
                localStorage.setItem('darkMode', 'true')
                this.$toast('已开启深色模式')
            } else {
                document.documentElement.classList.remove('dark-mode')
                localStorage.setItem('darkMode', 'false')
                this.$toast('已关闭深色模式')
            }
        },

        changeFontSize(value) {
            // 预览字体大小变化
            this.fontSizeIndex = value
        },

        saveFontSize() {
            // 保存字体大小设置
            localStorage.setItem('fontSize', this.fontSizeIndex)
            document.documentElement.style.fontSize = this.fontSizePx[this.fontSizeIndex] + 'px'
            this.showFontSizePopup = false
            this.$toast('字体大小已更新')
        },

        clearCache() {
            // 清除缓存
            this.$dialog.confirm({
                title: '清除缓存',
                message: '确定要清除应用缓存吗？这将不会删除您的个人数据。',
            }).then(() => {
                this.$toast.loading({
                    message: '正在清除缓存...',
                    forbidClick: true,
                    duration: 1500
                })

                setTimeout(() => {
                    this.cacheSize = '0KB'
                    this.$toast.success('缓存已清除')
                }, 1500)
            })
        },

        checkUpdate() {
            // 检查更新
            this.$toast.loading({
                message: '正在检查更新...',
                forbidClick: true
            })

            setTimeout(() => {
                this.$toast.clear()
                this.$dialog.alert({
                    title: '检查更新',
                    message: '当前已是最新版本 v1.0.0',
                })
            }, 1500)
        },

        showLogoutConfirm() {
            // 退出登录确认
            this.$dialog.confirm({
                title: '退出登录',
                message: '确定要退出当前账号吗？',
            }).then(() => {
                // 执行退出登录
                this.$store.dispatch('LogOut')
                this.$toast.success('已退出登录')
                this.$router.push('/login')
            })
        }
    },
    mounted() {
        // 初始化设置
        const savedDarkMode = localStorage.getItem('darkMode')
        if (savedDarkMode === 'true') {
            this.darkMode = true
            document.documentElement.classList.add('dark-mode')
        }

        const savedFontSize = localStorage.getItem('fontSize')
        if (savedFontSize !== null) {
            this.fontSizeIndex = parseInt(savedFontSize)
            document.documentElement.style.fontSize = this.fontSizePx[this.fontSizeIndex] + 'px'
        }
    }
}
</script>

<style scoped>
.settings-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.settings-content {
    padding: 0px;
}

.settings-section {
    margin-bottom: 20px;
}

.section-title {
    margin-left: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #969799;
}

.font-size-text {
    color: #969799;
    font-size: 14px;
}

.cache-size {
    color: #969799;
    font-size: 14px;
}

.logout-btn {
    margin: 30px 16px;
}

.version-info {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 30px;
    color: #969799;
    font-size: 12px;
}

/* 字体大小弹窗样式 */
.font-size-popup {
    padding: 20px;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.popup-title {
    font-size: 16px;
    font-weight: 500;
}

.font-size-slider {
    margin: 30px 0;
}

.font-size-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: #969799;
    font-size: 14px;
}

.custom-slider-button {
    width: 50px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
    border-radius: 10px;
}

.font-size-preview {
    margin: 20px 0;
    padding: 15px;
    background-color: #f7f8fa;
    border-radius: 8px;
}

.font-size-preview p:first-child {
    margin-bottom: 10px;
    font-size: 14px;
    color: #969799;
}

.popup-buttons {
    margin-top: 20px;
}

/* 深色模式样式 */
:global(.dark-mode) {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --card-background: #1e1e1e;
    --border-color: #333;
}

:global(.dark-mode) .settings-container {
    background-color: var(--background-color);
    color: var(--text-color);
}

:global(.dark-mode) .van-cell {
    background-color: var(--card-background);
    color: var(--text-color);
}

:global(.dark-mode) .van-cell__title {
    color: var(--text-color);
}

:global(.dark-mode) .van-cell__value {
    color: var(--text-color);
}

:global(.dark-mode) .font-size-preview {
    background-color: var(--card-background);
}
</style>